<template>
    <div class="goods" v-if="shopInfo">
      <!-- 商家推荐 -->
      <div class="recommend" v-for="(recommend, index) in shopInfo.recommend" :key="index">
        <p class="recommend-name" >{{recommend.name}}</p>
        <div class="recommend-wrap">
          <ul>
            <li v-for="(item,index) in recommend.items" :key="index">
              <img :src="item.image_path" alt>
              <div class="recommend-food">
                <p class="recommend-food-name h5lineHeight">{{item.name}}</p>
                <p class="recommend-food-zm">月售{{item.month_sales}} 好评率{{item.satisfy_rate}}</p>
              </div>
              <div class="recommend-food-price">
                <p>¥{{item.activity.fixed_price}}</p>
                <cartControll :food="item"/>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 商品分类 -->
      <div class="menuview">
          <!-- 左侧分类列表 -->
          <div class="menu-wrapper" ref="menuScroll">
              <ul>
                  <li @click="selectMenu(index)" v-for="(item,index) in shopInfo.menu" :key="index" :class="{'current':currentIndex===index}">{{item.icon}}{{item.name}}</li>
              </ul>
          </div>
          <!-- 右侧商品内容 -->
          <div class="foods-wrapper" ref="foodScroll">
              <ul>
                  <li class="food-list-hook" v-for="(item,index) in shopInfo.menu" :key="index">
                    <!-- 内容标题 -->
                    <div class="category-title">
                          <strong>{{item.name}}</strong>
                    </div>
                    <!-- 内容下 -->
                    <div @click="handleFood(food)" class="fooddetails" v-for="(food,i) in item.foods" :key="i">
                        <!-- 左侧 -->
                        <img :src="food.image_path">
                        <!-- 右侧 -->
                        <section class="fooddetails-info">
                            <h4 class="h5lineHeight">{{food.name}}</h4>
                            <p class="fooddetails-des h5lineHeight">{{food.description}}</p>
                            <p class="fooddetails-sales">月售{{food.month_sales}} 好评率{{food.satisfy_rate}}</p>
                            <div class="fooddetails-price">
                            <span class="price">￥{{food.fixed_price}}</span>
                            <cartControll :food="food"/>
                        </div>
                        </section>
                    </div>
                  </li>
              </ul>
          </div>
      </div>
      <!-- 购物车 -->
      <shopCart :shopInfo="shopInfo" />
      <!-- 商品详情 -->
      <food :food="selectFood" :isShow="showFood" @close="showFood=false"/>
    </div>
</template>

<script>
    import {
        getNaiChaData
    } from "../../networks/api.js";
    import BScroll from "better-scroll";
    import cartControll from "../../components/shops/cartControll.vue";
    import shopCart from "./shopCart.vue";
    import food from "./food.vue";
    export default {
        name: 'goods',
        data() {
            return {
                shopInfo: null,
                menuScroll: {}, //左侧滚动事件
                foodScroll: {}, //右侧滚动事件
                scrollY: 0, //菜单右侧当前滚动到的y值
                listHeight: [], //菜单左侧的列表高度
                selectFood: null, //点击每个商品的详情
                showFood: false,
            }
        },
        created() {
            this.getData();
        },
        computed: {
            // 根据右侧滚动的位置看是哪个区间的，确定对应的索引下标
            currentIndex() {
                for (let i = 0; i < this.listHeight.length; i++) {
                    let height = this.listHeight[i];
                    let height2 = this.listHeight[i + 1];
                    // 判断右侧菜单滚动区间是否在两个高度之间
                    if (this.scrollY >= height && this.scrollY < height2) {
                        return i;
                    }
                }
                return 0;
            }
        },
        methods: {
            getData() {
                getNaiChaData().then(res => {
                    this.shopInfo = res.data;
                    //console.log(this.shopInfo);
                    this.$nextTick(() => {
                        //dom已经更新
                        this.initScroll();
                        //计算菜单左侧的区域高度
                        this.calcLeftHeight();
                    });
                })
            },
            initScroll() {
                this.menuScroll = new BScroll(this.$refs.menuScroll, {
                    click: true,
                });
                this.foodScroll = BScroll(this.$refs.foodScroll, {
                    probeType: 3,
                    click: true,
                });
                //给foodScroll添加一个事件，来判断右侧菜单当前滚动到的y值
                this.foodScroll.on('scroll', pos => {
                    //console.log(pos.y);得到现在所在的区域
                    this.scrollY = Math.abs(Math.round(pos.y))
                })
            },
            //index是获取左侧商品标题的下标
            selectMenu(index) {
                let foodList = this.$refs.foodScroll.getElementsByClassName("food-list-hook");
                let el = foodList[index];
                //console.log(el);
                this.foodScroll.scrollToElement(el, 300)
            },
            // 计算菜单左侧的区域高度
            calcLeftHeight() {
                let foodList = this.$refs.foodScroll.getElementsByClassName("food-list-hook");
                // 每个区的高度添加到数组中
                let height = 0; //一开始的区都是从0开始
                this.listHeight.push(height);
                //遍历foodlist，获得到每个区的高度，-1意思是已经添加进去一个了
                for (let i = 0; i < foodList.length - 1; i++) {
                    let item = foodList[i];
                    //每个区的可视高度 进行累加
                    height += item.clientHeight;
                    this.listHeight.push(height);
                }
                //console.log(this.listHeight);
            },
            handleFood(food) {
                //console.log(food);
                this.selectFood = food;
                this.showFood = true;
            }

        },
        components: {
            cartControll,
            shopCart,
            food,
        }

    }
</script>

<style scoped>
    .h5lineHeight {
        /* 解决不同移动端字体偏上 */
        display: flex;
        align-items: center;
        justify-content: left;
        line-height: normal;
    }
    
    .goods {
        position: relative;
        height: calc(100% - 10.666667vw);
    }
    
    .recommend {
        padding-top: 4.266667vw;
        background-color: #fff;
    }
    
    .recommend-name {
        padding-left: 4.266667vw;
        color: #333;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 2.666667vw;
    }
    
    .recommend-wrap {
        overflow-x: scroll;
        display: flex;
        width: 100%;
    }
    
    .recommend-wrap ul {
        display: flex;
        padding-left: 4.266667vw;
    }
    
    .recommend-wrap ul li {
        flex: none;
        width: 32vw;
        margin-right: 2.666667vw;
    }
    
    .recommend-wrap li img {
        display: block;
        width: 32vw;
        height: 32vw;
        border-top-left-radius: 0.8vw;
        border-top-right-radius: 0.8vw;
        max-width: 100%;
    }
    
    .recommend-food .recommend-food-name {
        color: #333;
        font-size: 0.8rem;
        margin: 1.866667vw 0 1.233333vw;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .recommend-food .recommend-food-zm {
        color: #999;
        font-size: 0.6rem;
        margin-bottom: 1.866667vw;
        min-height: 1em;
    }
    
    .recommend-food-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0.266667vw;
    }
    
    .recommend-food-price p {
        font-size: 1rem;
        color: #ff5339;
    }
    
     ::-webkit-scrollbar {
        width: 0 !important;
    }
    
    .menuview {
        box-sizing: border-box;
        height: 100%;
        padding-bottom: 10.8vw;
        background-color: #fff;
        display: flex;
    }
    
    .menu-wrapper {
        overflow-y: hidden;
        /* height: 100%; */
        height: calc(100% - 12.8vw);
        background-color: #f8f8f8;
        padding-bottom: 10.666667vw;
        width: 20.533333vw;
    }
    
    .menu-wrapper li {
        padding: 4.666667vw 2vw;
        font-size: 0.6rem;
        color: #666;
        line-height: 1.2;
    }
    
    .menu-wrapper li img {
        max-width: 100%;
        width: 3.466667vw;
        height: 3.466667vw;
        vertical-align: top;
        margin-right: 0.8vw;
    }
    
    .foods-wrapper {
        overflow-y: hidden;
        /* height: 100%; */
        height: calc(100% - 12.8vw);
        width: 79.466667vw;
        padding-bottom: 10.666667vw;
    }
    
    .category-title {
        margin-left: 2.666667vw;
        padding: 2vw 8vw 2vw 0;
        display: flex;
        align-items: center;
        justify-content: left;
        line-height: normal;
        overflow: hidden;
    }
    
    .category-title strong {
        margin-right: 1.333333vw;
        font-weight: 700;
        font-size: 0.8rem;
        color: #666;
    }
    
    .category-title span {
        flex: 1;
        color: #999;
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .fooddetails {
        min-height: 30.666667vw;
        padding: 2.666667vw 0 2.666667vw 2.666667vw;
        margin-bottom: 0.133333vw;
        display: flex;
    }
    
    .fooddetails img {
        width: 25.333333vw;
        height: 25.333333vw;
        flex: none;
        margin-right: 2.666667vw;
        border-radius: 0.533333vw;
    }
    
    .fooddetails-info {
        flex: 1;
        padding-bottom: 6.666667vw;
        padding-right: 4vw;
    }
    
    .fooddetails-info h4 {
        padding-right: 4vw;
        font-weight: 700;
        overflow: hidden;
        font-size: 1rem;
        white-space: nowrap;
        width: 40vw;
        text-overflow: ellipsis;
        color: #333;
    }
    
    .fooddetails-des {
        margin: 1.333333vw 0;
        font-size: 0.6rem;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 42.666667vw;
    }
    
    .fooddetails-sales {
        margin: 1.733333vw 0 !important;
        color: #999;
        font-size: 0.6rem;
        line-height: 1;
        min-height: 1em;
    }
    
    .fooddetails-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 3.733333vw;
    }
    
    .fooddetails-price .price {
        font-size: 1rem;
        line-height: 4.266667vw;
        color: #ff5339;
        padding-bottom: 0.933333vw;
        display: flex;
        align-items: baseline;
    }
    
    .menu-wrapper .current {
        background-color: #fff !important;
        color: #333 !important;
    }
</style>